import { customForm } from "@/components/ProForm/interface/index";
import { Role } from "@/api/interface";

import { defaultStyle } from "@/basic/style";
import { ProTableValue } from "@/interface/public";

export function useAddForm(proTableBox: ProTableValue) {
  let addForm = reactive<customForm<Role.ResRoleList>>({
    form: {},
    title: "",
    visible: false,
    formCols: 1,
    options: [
      {
        label: "id",
        prop: "id",
        hide: true,
        type: "input",
        defaultValue: ""
      },
      {
        label: "roleId",
        prop: "roleId",
        hide: true,
        type: "input",
        defaultValue: ""
      },
      {
        type: "input",
        label: "roleName",
        hide: false,
        prop: "name",
        defaultValue: "",
        rules: [{ required: true, message: "roleName", trigger: "blur" }]
      },
      {
        type: "select",
        label: "PersonalRole",
        prop: "userIds",
        hide: false,
        defaultValue: "",
        children: [],
        attrs: {
          loading: false,
          style: {
            width: "230px"
          },
          multiple: true,
          filterable: true,
          remote: true,
          "reserve-keyword": true,
          "remote-method": (key: string): Promise<void> =>
            remoteMethod(addForm, "userIds", userPageByStatus, { key }, ["name", "id"])
        }
      },
      {
        type: "input",
        label: "roleRemark",
        defaultValue: "",
        hide: false,
        prop: "remark",
        attrs: {
          style: defaultStyle
        }
      }
    ]
  });

  const saveAddForm = async (form: Role.ReqSave | Role.ReqEdit) => {
    if (addForm.title === "修改人员") {
      const params = cloneDeep(form);
      params.userIds = arrJoin(params.userIds);
      await roleUserSave(params);
    } else {
      await roleSave(form);
    }
    addForm.visible = false;
    proTableBox.value?.getTableList();
  };
  return { addForm, saveAddForm };
}
